<template>
    <div class="card">
        <div class="top">
            <el-image class="avatar" :src="data.avatar" />
            <div class="info">
                <div class="info_top">
                    <div class="info_top_name">{{ data.name }}</div>
                    <div v-if="data.tag && !data.isExpired" class="info_top_tag">已开通</div>
                    <div v-if="data.tag && data.isExpired" class="info_top_tag expired">已过期</div>
                </div>
                <div class="info_bottom">{{ data.desc }}</div>
            </div>
        </div>
        <div class="bottom">
            <slot name="btn" />
        </div>
    </div>
</template>

<script setup>
import { computed, reactive, inject, useSlots } from 'vue';

const slots = useSlots();
const props = defineProps({
    data: { type: Object, default: () => ({}) }
});
const data = computed(() => props.data);
</script>

<style lang="scss" scoped>
.card {
    width: 410px;
    padding: 24px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #eaeaea;
    &:hover {
        box-shadow: 0px 2px 24px 0px #eaeaea;
    }
    .top {
        display: flex;
        align-items: center;
        margin-bottom: 24px;
        .avatar {
            width: 80px;
            height: 80px;
            min-width: 80px;
            margin-right: 16px;
        }
        .info {
            .info_top {
                display: flex;
                height: 22px;
                margin-bottom: 8px;
                .info_top_name {
                    font-size: 18px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #33302d;
                }
                .info_top_tag {
                    margin-left: 4px;
                    padding: 5px 13px;
                    background: #f2fee5;
                    border-radius: 2px;
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #60b900;
                    &.expired {
                        background: var(--el-color-danger);
                        color: #ffffff;
                        line-height: 12px;
                    }
                }
            }
            .info_bottom {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #696969;
                line-height: 18px;
            }
        }
    }
    .bottom {
        text-align: right;
    }
}
</style>
